<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js定时器控制元素移动</title>
    <style>
        .img{
            display: block;
            width: 100px;
            height:100px;
            position: absolute;
            top:  0px;
            left: 0px;
        }
    </style>
    <script src="js/move.js" type="text/javascript"></script>
    <script>
        window.onload=function(){
            var oDiv=document.getElementsByTagName("img");
            for(var i=1;i<8;i++){
               /* temp+='<img class="img" src="img/mv/'+i+'.jpg"></img>';*/
                document.body.innerHTML +='<img class="img" src="img/mv/'+i+'.jpg"></img>';
                oDiv[i-1].style.left=(i-1)*120+"px";
            }
            var timer=null;
            var times=null;
            var num=0;
           /* autoPlay();*/
         /*   function autoPlay(){
                clearInterval(times);
                times=setInterval(function(){
                    clearInterval(timer);
                    moves(50,500,function(){
                        moves(50,0);
                    });
                },1000);
            }*/
      /*      setInterval(function(){
                clearInterval(timer);
                moves(50,500,function(){
                    moves(50,0);
                });
            },2000)*/
            document.onclick=function(){
                clearInterval(timer);
                moves(50,500,function(){
                    moves(50,0);
                });
            }
            function moves(step,target,endFun){
                timer=setInterval(function(){
                    move(oDiv[num],"top",step,target);
                    num++;
                    if(num>oDiv.length-1){
                        num=0;
                        clearInterval(timer);
                        if(endFun){
                            endFun();
                        }
                    }
                },100);
            }
        }

    </script>
</head>
<body>
</body>
</html>